// Mixins 文件

// 响应式断点
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// 媒体查询 mixin
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

// 容器 mixin
@mixin container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  
  @include respond-below(md) {
    padding: 0 16px;
  }
}

// 文本省略 mixin
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 清除浮动 mixin
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 居中 mixin
@mixin center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 垂直居中 mixin
@mixin center-vertical($position: absolute) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

// 水平居中 mixin
@mixin center-horizontal($position: absolute) {
  position: $position;
  left: 50%;
  transform: translateX(-50%);
}

// 阴影 mixin
@mixin shadow($level: 'base') {
  @if $level == 'light' {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  } @else if $level == 'base' {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  } @else if $level == 'dark' {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}

// 过渡动画 mixin
@mixin transition($property: all, $duration: 0.3s, $timing-function: ease) {
  transition: $property $duration $timing-function;
}

// 渐变背景 mixin
@mixin gradient-bg($direction: 135deg, $color1: #667eea, $color2: #764ba2) {
  background: linear-gradient($direction, $color1 0%, $color2 100%);
}

// 按钮样式 mixin
@mixin button-style($bg-color, $text-color: white, $hover-bg: null) {
  background-color: $bg-color;
  color: $text-color;
  border: 1px solid $bg-color;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    @if $hover-bg {
      background-color: $hover-bg;
      border-color: $hover-bg;
    } @else {
      filter: brightness(1.1);
    }
  }
  
  &:active {
    transform: translateY(1px);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    
    &:hover {
      background-color: $bg-color;
      border-color: $bg-color;
      transform: none;
    }
  }
}

// 卡片样式 mixin
@mixin card-style($padding: 20px, $radius: 8px, $shadow: true) {
  background: white;
  border-radius: $radius;
  padding: $padding;
  
  @if $shadow {
    @include shadow('base');
  }
  
  @include transition(box-shadow);
  
  &:hover {
    @if $shadow {
      @include shadow('dark');
    }
  }
}

// 输入框样式 mixin
@mixin input-style($border-color: #dcdfe6, $focus-color: #409eff) {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid $border-color;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  
  &:focus {
    outline: none;
    border-color: $focus-color;
    box-shadow: 0 0 0 2px rgba($focus-color, 0.2);
  }
  
  &::placeholder {
    color: #c0c4cc;
  }
  
  &:disabled {
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

// 滚动条样式 mixin
@mixin scrollbar($width: 8px, $track-color: #f1f1f1, $thumb-color: #c1c1c1) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      filter: brightness(0.9);
    }
  }
}

// 加载动画 mixin
@mixin loading-animation($size: 20px, $color: #409eff) {
  width: $size;
  height: $size;
  border: 2px solid rgba($color, 0.2);
  border-top: 2px solid $color;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 脉冲动画 mixin
@mixin pulse-animation($color: #409eff, $duration: 2s) {
  animation: pulse $duration infinite;
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba($color, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba($color, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

// 淡入动画 mixin
@mixin fade-in($duration: 0.3s, $delay: 0s) {
  opacity: 0;
  animation: fadeIn $duration ease-in-out $delay forwards;
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
}

// 滑入动画 mixin
@mixin slide-in($direction: 'up', $distance: 20px, $duration: 0.3s, $delay: 0s) {
  opacity: 0;
  
  @if $direction == 'up' {
    transform: translateY($distance);
  } @else if $direction == 'down' {
    transform: translateY(-$distance);
  } @else if $direction == 'left' {
    transform: translateX($distance);
  } @else if $direction == 'right' {
    transform: translateX(-$distance);
  }
  
  animation: slideIn#{capitalize($direction)} $duration ease-out $delay forwards;
  
  @if $direction == 'up' {
    @keyframes slideInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  } @else if $direction == 'down' {
    @keyframes slideInDown {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  } @else if $direction == 'left' {
    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  } @else if $direction == 'right' {
    @keyframes slideInRight {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

// 工具函数
@function capitalize($string) {
  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}
